﻿<MCard Class="mx-auto"
       MaxWidth="300"
       Tile>
    <MList Disabled>
        <MSubheader>REPORTS</MSubheader>
        <MListItemGroup @bind-Value="selectedItem"
                        Color="primary">
            @foreach (var item in items)
            {
                <MListItem>
                    <MListItemIcon>
                        <MIcon>
                            @item.Icon
                        </MIcon>
                    </MListItemIcon>
                    <MListItemContent>
                        <MListItemTitle>@item.Text</MListItemTitle>
                    </MListItemContent>
                </MListItem>
            }
        </MListItemGroup>
    </MList>
</MCard>

@code{
    StringNumber selectedItem = 1;
    Item[] items = new Item[]
    {
       new Item { Text= "Real-Time", Icon= "mdi-clock" },
       new Item { Text= "Audience", Icon= "mdi-account" },
       new Item { Text= "Conversions", Icon= "mdi-flag" }
    };

    class Item
    {
        public string Text { get; set; }
        public string Icon { get; set; }
    }
}